import React from 'react'
import ReactDOM from 'react-dom'
import Router from 'next/router'
import PropTypes from 'prop-types';
import {ListView, PullToRefresh} from 'antd-mobile';


const listsItemStyle = {
    display: 'flex',
    justifyContent: 'space-between',
    padding: `.2rem .6rem`,
    fontSize: '.2rem',
    borderBottom: `1px solid #DCDCDC`
}
const listsItemFlStyle = {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'spaceAround',
    fontSize: '.34rem',
    lineHeight:'.4rem'
}
const listsItemFlH2Style = {
    width: '6rem',
    lineHeight: '.4rem',
    display: '-webkit-box',
    WebkitBoxOrient: 'vertical',
    WebkitLineClamp: '2',
    overflow: 'hidden'
}
const listsItemFlFooStyle = {
    display: 'flex',
    justifyContent: 'space-between',
    width: '6rem',
    marginTop:'.6rem'
}

const listsItemFrStyle = {
    width: '2.4rem',
    height:'2.4rem'
}
const listsItemFrImgStyle = {
    width: '100%',
    height:'100%'
}

const listsItemFlFooOneStyle = {
    display: 'inline-block',
    width: '2rem',
    height: '25px',
    lineHeight: '25px',
    textAlign: 'center',
    color: '#FF0000',
    background: '#FCC4C4',
    borderRadius:' 10px',
}

export default class NewsList extends React.Component {
    constructor(props) {
        super(props);
        const dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1 !== r2
        });

        this.state = {
            // 是否显示刷新状态
            refreshing: true,
            dataSource,
            // 下拉状态
            down: true,
            mobileArticleList: props.mobileArticleList
        }
    }

    static getDerivedStateFromProps(nextProps) {
        let {mobileArticleList} = nextProps
        let {isLoading} = nextProps
        let {pullLoading} = nextProps
        return {
            mobileArticleList,
            pullLoading,
            isLoading
        }
    }

    //获取item进行展示
    renderRow = (item, i) => {
        return (
            <div  style={listsItemStyle} key={i} onClick={() => {
                Router.push({pathname: '/newsCenter/newsDetail', query: {id: item.id}})
            }}>
                <div style={listsItemFlStyle}>
                    <h2 style={listsItemFlH2Style}>{item.cate_name} | {item.title}</h2>
                    <div  style={listsItemFlFooStyle}>
                        {i == 0 ? <span style={listsItemFlFooOneStyle}>置顶</span> : <span> </span>}
                        <span  style={{color: '#666'}}>{item.create_time}</span>
                    </div>
                </div>
                <div  style={listsItemFrStyle}>
                    <img src={item.img} style={listsItemFrImgStyle} alt=""/>
                </div>
            </div>
        )
    }
    // render() {
    //     return (
    //         <div className='news_list'>
    //             {/*面包屑*/}
    //             <div className='bread_crumbs'>
    //                 <span>高品</span>
    //                 <span> > </span>
    //                 <span>新闻中心</span>
    //             </div>
    //             {/*列表*/}
    //             <div className='news_wrapper'>
    //                 <ul className='news_lists news_content'>
    //                     {
    //                         this.state.mobileArticleList
    //                         &&
    //                         this.state.mobileArticleList.map((item,index) => {
    //                             return (
    //                                 <li className='news_lists_item' key={index} onClick={() => {
    //                                     Router.push({pathname: '/newsCenter/newsDetail', query: {id: item.id}})
    //                                 }}>
    //                                     <div className='item_fl'>
    //                                         <h2>{item.cate_name} | {item.title}</h2>
    //                                         <div className='item_fl_foo'>
    //                                             {index === 0 ? <span className='item_fl_foo_one'>置顶</span> : <span> </span> }
    //                                             <span className='item_fl_foo_time'>{item.create_time}</span>
    //                                         </div>
    //                                     </div>
    //                                     <div className='item_fr'>
    //                                         <img src={item.img} alt=""/>
    //                                     </div>
    //                                 </li>
    //                             )
    //                         })
    //                     }
    //                 </ul>
    //             </div>
    //
    //             <PullToRefresh
    //                 damping={60}
    //                 direction={this.state.down ? 'down' : 'up'}
    //                 className='news_wrapper'
    //                 onRefresh={() => {
    //                     this.props.refreshPage()
    //                 }}
    //             >
    //                 <ul className='news_lists news_content'>
    //                     {
    //                         this.state.mobileArticleList
    //                         &&
    //                         this.state.mobileArticleList.map((item,index) => {
    //                             return (
    //                                 <li className='news_lists_item' key={index} onClick={() => {
    //                                     Router.push({pathname: '/newsCenter/newsDetail', query: {id: item.id}})
    //                                 }}>
    //                                     <div className='item_fl'>
    //                                         <h2>{item.cate_name} | {item.title}</h2>
    //                                         <div className='item_fl_foo'>
    //                                             {index === 0 ? <span className='item_fl_foo_one'>置顶</span> : <span> </span> }
    //                                             <span className='item_fl_foo_time'>{item.create_time}</span>
    //                                         </div>
    //                                     </div>
    //                                     <div className='item_fr'>
    //                                         <img src={item.img} alt=""/>
    //                                     </div>
    //                                 </li>
    //                             )
    //                         })
    //                     }
    //                 </ul>
    //             </PullToRefresh>
    //
    //         </div>
    //     )
    // }
    // 执行下拉刷新操作
    onRefresh = () => {
        // 请求第一页数据
        this.props.refreshPage()
    };
    onEndReached = () => {
        if(this.state.isLoading){
            this.props.refreshPage('加载更多')
        }
    }

    render() {
        const {mobileArticleList, dataSource, pullLoading, isLoading} = this.state;
        return (
            <div>
                {
                    mobileArticleList && mobileArticleList.length ?
                        <ListView
                            ref={el => this.lv = el}
                            onEndReachedThreshold={10}
                            onEndReached={() => this.onEndReached()}
                            dataSource={dataSource.cloneWithRows(mobileArticleList)}
                            renderFooter={() => (<div style={{padding: 30, fontSize:'.4rem', textAlign: 'center'}}>
                                {isLoading ? 'Loading...' : '我是有底线的...'}
                            </div>)}
                            renderRow={(rowData, id1, i) => this.renderRow(rowData, i)}
                            style={{
                                height: '10rem',
                            }}
                            pullToRefresh={
                                <PullToRefresh
                                    damping={60}
                                    refreshing={pullLoading}
                                    onRefresh={this.onRefresh}
                                />}
                        /> : null
                }

            </div>);
    };
}
NewsList.propTypes = {
    mobileArticleList: PropTypes.array
}

